<template>
	<div>
		
		<div class="nav-bar">
			<div class="cen">
				<img class="logo" src="../assets/logo3.jpg" >
        COINBTC
			</div>
			<div class="addr">{{address}}</div>
			<div :class="['nav-dwom iconfont' , navList ? 'icon-guanbi ':'icon-24px']" @click="navShow"></div>
		</div>
		
		<div class="nav-ov-l tran" :class="navList ? 'on' :''" @click="guan()"></div>
		<div class=" nav-ul tran"  :class="navList ? 'on' :''">
			<div class="li" @click="navTo('index')" >{{$t('index.page1')}}</div>
			<div class="li" @click="navTo('about')" >{{$t('index.page2')}}</div>
			<div class="li" @click="navTo('paper')" >{{$t('index.page3')}}</div>
			<div class="li" @click="navTo('certificates')" >{{$t('index.page4')}}</div>
			<!-- <div class="li" @click="langTab">中文/English</div> -->
			<div class="langList " :class="lang ? 'on':''" >
				<div class="li" @click="Lang('zh')">
						<div class="span"><img class="icon" src="../assets/lang/Cn.png"> 中文</div>
				</div>
				<div class="li" @click="Lang('en')">
					<div class="span"><img class="icon" src="../assets/lang/En.png"> English</div>
				</div>
			</div>
		</div>
			
		
	</div>

</template>

<script>
	import Web3 from "web3";
	export default {
		name:"navBar",
		data() {
			return {
				navList: false,
				lang:false,
				time:'',
				address:'',
			}
		},
		mounted() {
			// 获取钱包地址
			this.address = this.$dapp.getAddress();
			this.init();
		},
		
		methods: {
			async init() {
			  // 初始化并连接钱包
			  await this.$dapp.init("0x1", Web3);
			  await this.$dapp.enabled();
				this.address = this.$dapp.getAddress()
				this.$forceUpdate();
				console.log(this.address)
			},
			navShow: function(e) {
				this.navList = !this.navList;
			},
			navTo:function(e){
				this.$router.push({name:e})
			},
			guan(){
				setTimeout( () =>{
					this.navList = false;
				},200)
			},
			langTab(){
				this.lang = !this.lang;
			},
			Lang(e){
				this.$i18n.locale = e;
				this.lang = false;
				this.guan();
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.tran {
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
	}
	
	.nav-bar{
		height: 120px;
		z-index: 999;
		background: #256dff; 
		text-align: left;
		position: fixed; top:0px; width: 100%;
		display: flex; padding: 30px; box-sizing: border-box;
		line-height: 60px; color:#FFF;
		
		.cen{
			flex:1;
			display: inline-block;
			height: 60px;font-size: 40px;
			.logo{height: 60px;border-radius:50%;  margin-right: 10px; display: inline-block; float: left;}
		}
		
		.addr{
			width: 200px; 
			height: 60px;
			background: #FFF;
			margin: 0px 30px; color:#666;
			border-radius: 10px; padding:0px 10px; box-sizing: border-box; 
			 white-space: nowrap;
			    text-overflow: ellipsis;
			    overflow: hidden;
			    word-break: break-all;
		}
		
		.nav-dwom{  color:#FFF; font-size: 50px; }
	}
	.nav {
		position: absolute; top: 0;left: -100%;
		width: 100%;height: 100%;
		z-index: 99; overflow: hidden;
		padding-top: 120px; box-sizing: border-box;
		background: rgba(13,35,80 , 0.5);
		&.on {
			left:0%;
			.ul{
				right:-0%;
			}
		}
	}
	
	.nav-ul {
		position: fixed; right:-50%; z-index: 100;
		padding: 0px 30px; padding-top: 120px; box-sizing: border-box;
		height: 100%; width: 50%; 
		background: #fff;
		text-align: center;
		
		&.on{right:-0%;}
		
		.li {
			color: #999;
			height: 100px;
			line-height: 100px;
			font-size: 30px;
			border-top: 0.5px solid #ddd;
			
		}
	}
	.nav-ov-l{
		position: fixed; left:-50%; z-index: 99;
		height: 100%; width: 50%; 
		background: rgba(13,35,80 , 0.5);
		
		&.on{left: 0%;}
	}
	
	
	.nav-ul .langList{
		border-radius: 10px;
		box-shadow:0px 0px 0px 0px #FFF;
		padding:0px 20px; height:0px;
		overflow: hidden;
		
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
		
		.li{height: 80px; line-height: 80px;}
		
		.span{
			display:inline-block;
			height: 50px; line-height: 50px; font-size: 26px;
			.icon{height: 50px; float:left; margin-right: 20px; }
		}
		
		&.on{
			height: 160px;
			box-shadow:0 2px 5px 0px #666;
		}
	}
	
</style>
